<template>
  <div>
    <div class="header">
      <van-icon color="#333" size="15px" name="arrow-left" @click="goback" />
      <div style="flex: 1" />
      <van-icon size="15px" name="location-o" />
      <div @click="tobuycity">{{ city }}</div>
    </div>
    <div class="space">
      <img
        v-show="city == '北京市'"
        src="https://image.nunbdc.net/cityImages/beijing.png"
        alt=""
      />
      <img
        v-show="city == '长沙市'"
        src="https://image.nunbdc.net/cityImages/changsha.png"
        alt=""
      />
      <img
        v-show="city == '成都市'"
        src="https://image.nunbdc.net/cityImages/chengdu.png"
        alt=""
      />
      <img
        v-show="city == '重庆市'"
        src="https://image.nunbdc.net/cityImages/chongqin.png"
        alt=""
      />
      <img
        v-show="city == '大连市'"
        src="https://image.nunbdc.net/cityImages/dalian.png"
        alt=""
      />
      <img
        v-show="city == '东莞市'"
        src="https://image.nunbdc.net/cityImages/dongguan.png"
        alt=""
      />
      <img
        v-show="city == '广州市'"
        src="https://image.nunbdc.net/cityImages/guangzhou.png"
        alt=""
      />
      <img
        v-show="city == '杭州市'"
        src="https://image.nunbdc.net/cityImages/hangzhou.png"
        alt=""
      />
      <img
        v-show="city == '南京市'"
        src="https://image.nunbdc.net/cityImages/nanjing.png"
        alt=""
      />
      <img
        v-show="city == '宁波市'"
        src="https://image.nunbdc.net/cityImages/ningbo.png"
        alt=""
      />
      <img
        v-show="city == '青岛市'"
        src="https://image.nunbdc.net/cityImages/qingdao.png"
        alt=""
      />
      <img
        v-show="city == '上海市'"
        src="https://image.nunbdc.net/cityImages/shanghai.png"
        alt=""
      />
      <img
        v-show="city == '沈阳市'"
        src="https://image.nunbdc.net/cityImages/shenyang.png"
        alt=""
      />
      <img
        v-show="city == '深圳市'"
        src="https://image.nunbdc.net/cityImages/shenzheng.png"
        alt=""
      />
      <img
        v-show="city == '苏州市'"
        src="https://image.nunbdc.net/cityImages/suzhou.png"
        alt=""
      />
      <img
        v-show="city == '天津市'"
        src="https://image.nunbdc.net/cityImages/tianjin.png"
        alt=""
      />
      <img
        v-show="city == '武汉市'"
        src="https://image.nunbdc.net/cityImages/wuhan.png"
        alt=""
      />
      <img
        v-show="city == '西安市'"
        src="https://image.nunbdc.net/cityImages/xian.png"
        alt=""
      />
      <img
        v-show="city == '郑州市'"
        src="https://image.nunbdc.net/cityImages/zhengzhou.png"
        alt=""
      />
    </div>
    <div class="middlebox">
      <div class="intpart">
        <van-icon class="search" color="#333" size="24" name="search" />
        <input
          v-model="serachval"
          type="text"
          placeholder="输入小区名称、街道、商圈等(仅包含热点城市数据)"
        />
      </div>
      <div class="querybtn">
        <button type="default" @click="jumptoqueryresult">立即查询</button>
      </div>
      <div v-show="showyes" class="adresspart">
        <div v-for="item in data" :key="item.id">
          <div>
            <div>{{ item.name.slice(0,14)+"..." }}</div>
            <div>{{ item.pname }}{{ item.cityname }}{{ item.adname }}</div>
            <div>{{ item.address.slice(0,16)+'...'}}</div>
          </div>
          <button
            @click="
              toresult(item.name, item.cityname, item.adname, item.address)
            "
          >
            查看房价
          </button>
        </div>
      </div>
      <div v-show="showno" class="nopart">
        <div>很抱歉，没有找到您搜索的地址</div>
      </div>
      <!-- <div style="width: 300px; height: 300px"></div> -->
    </div>
  </div>
</template>

<script>
import { getTianPeriphery,getTianPosition } from "../../apis/map.js";
import local from "@/utils/local";
import {_local} from "@/utils/storage"
import { getLnt,getNearby } from "@/apis/city";


import {
  getChooseCityQualify,
  getGeolocation,
  getChooseCity,
} from "@/utils/auth";
export default {
  data() {
    return {
      time: 10,
      distance: 5,
      serachval: "",
      data: [],
      showno: false,
      showyes: false,
      lng:"",
      lat:""
    };
  },
  created() {
    const chooseCityBuy = getChooseCityQualify();
    if (chooseCityBuy) {
      this.city = chooseCityBuy.city;
    } else {
      const chooseCity = getChooseCity();
      const geolocation = getGeolocation();
      this.city = chooseCity ? chooseCity.city : geolocation.city;
    }
    this.getLngLat()
  },
  methods: {
    getLngLat() {
      getLnt({
        keyword:_local.get("city")
      }).then((res) => {
        console.log("lnglat", res);
        this.lng = res.result.lon;
        this.lat = res.result.lat;
      });
    },
    goback() {
      this.$router.go(-1);
    },
    jumptoqueryresult() {
      if (this.serachval) {
        getNearby({
          keyword:this.serachval,
          lon:this.lng,
          lat:this.lat
        }).then((res) => {
          console.log("getNearby",res);
          if (res.result.pois.length==0) {
            this.showno = true;
            this.data=[]
          } else {
            this.showyes = true;
            this.data = res.result.pois;
          }
        });
      } else {
        this.$toast("请输入搜索内容");
      }
    },
    toresult(a, b, c, d) {
      const obj = { name: a, city: b, area: c, adress: d };
      local.set("buyquerydata", JSON.stringify(obj));
      this.$router.push({ path: "/buyqueryresult" });
    },
    tobuycity() {
      this.$router.push({ path: "/buycity" });
    },
  },
};
</script>

<style scoped lang="less">
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  color: #333;
}
.space {
  padding-top: 48px;
  img {
    width: 100%;
  }
}
.middlebox {
  margin: 15px;
  margin-top: 0px;
  .intpart {
    position: relative;
    .search {
      position: absolute;
      left: 13px;
      bottom: 9px;
    }
    input {
      width: 100%;
      height: 45px;
      border: 1px solid #f1f1f1;
      border-radius: 25px;
      padding-left: 40px;
      box-sizing: border-box;
      color: #333;
      background-color: #fff;
    }
    input::placeholder{
      font-size: 12px;
    }
  }
  .querybtn {
    margin: 15px auto 20px;
    height: 40px;
    text-align: center;
    button:active{
      background-color: rgba(69, 183, 203, 0.5);
    }
    button {
      height: 40px;
      width: 120px;
      border-radius: 20px;
      background-color: rgba(69, 183, 203, 0.9);
      color: #fff;
      font-size: 16px;
      line-height: 40px;
      border: none;
    }
  }
}
.adresspart {
  > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 10px;
    margin-top: 10px;
    font-size: 14px;
    color: #333;
    > button {
      background-color: #45b7cb;
      color: #fff;
      border: 1px solid #45b7cb;
      display: inline-block;
      padding: 8px 15px;
      border-radius: 20px;
    }
    > div {
      div {
        &:first-child {
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }
}
.nopart {
  text-align: center;
  margin: 10px 0;
  color: #333;
}
</style>
